<template>
  <div class="content assets-list-wrap">
    <ul class="asset-list">
      <li class="asset-item" v-for="(item,key) of balanList" :class="defalutIndex==key?'item-active':''" :key='key' @click="defalutIndex=key">
        <div class="asset-item-top">
          <div class="asset-coin-name">
            <img :src="item.coinIcon" />{{item.coinCore}}</div>
          <span>{{item.cny|Fixed(4)}}</span>
        </div>
        <transition name="slide-fade">
          <div class="asset-item-desc" v-show="defalutIndex==key">
            <p>
              <span>{{'AVALIABLE_ASSETS'|t}}</span>
              <span>{{item.enable|Fixed(4)}}</span>
            </p>
            <p>
              <span>{{'ENABLE_ASSETS'|t}}</span>
              <span>{{item.unable|Fixed(4)}}</span>
            </p>
            <p>
              <span>{{'TOTAL_ASSETS'|t}}</span>
              <span>{{item.total|Fixed(4)}}</span>
            </p>
            <div class="item-desc-btn">
              <a href="javascript:;" class="item-btn" @click="$router.push({path:'/asset/recharge',query:{coinType:item.coinType}})">{{'RECHARGE'|t}}</a>
              <a href="javascript:;" class="item-btn active" @click="$router.push({path:'/asset/withdraw',query:{coinType:item.coinType}})">{{'WITHDRAWLS'|t}}</a>
            </div>
          </div>
        </transition>
      </li>
    </ul>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { Asset } from '@/services';
  export default {
    data() {
      return {
        defalutIndex: 0,
        balanList: []
      };
    },
    methods: {
      async getData() {
        try {
          let res = await Asset.GetBalanByUserNo({
            userNo: Auth.getItem('userId'),
            hide: '0',
            token: Auth.getItem('token')
          });
          this.balanList = res.data;
        } catch (error) {
          console.log(error);
        }
      }
    },
    created() {
      this.getData();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/asset.scss";

  /* 设置持续时间和动画函数 */

  .slide-fade-enter-active {
    transition: all .5s ease;
  }

  .slide-fade-leave-active {
    transition: all .5s ease;
  }

  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateY(20px);
    opacity: 0;
  }
</style>